<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>仪表状态</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/flow-meter.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            {% csrf_token %}

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    电池欠压状态
                </label>
                <div class="layui-input-inline" id="battery_pressure_state_div">
                    <input type="text" readonly id="battery_pressure_state" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    阀门异常标志
                </label>
                <div class="layui-input-inline" id="valve_error_flag_div">
                    <input type="text" readonly id="valve_error_flag" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    欠费状态
                </label>
                <div class="layui-input-inline" id="owe_state_div">
                    <input type="text" readonly id="owe_state" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    传感器状态
                </label>
                <div class="layui-input-inline" id="sensor_state_div">
                    <input type="text" readonly id="sensor_state" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    温度
                </label>
                <div class="layui-input-inline" id="temperature_div">
                    <input type="text" readonly id="temperature" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="width: 120px">
                    版本
                </label>
                <div class="layui-input-inline" id="version_div">
                    <input type="text" readonly id="version" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="valve_state" class="layui-form-label" style="width: 120px">
                    阀门状态
                </label>
                <div class="layui-input-inline" id="valve_state_div">
                    {% if 'update_valve_state' in user.actions %}
                        <select name="valve_state" id="valve_state"
                                lay-filter="valve_state">
                            <option value="">未知</option>
                            <option value="1">开启</option>
                            <option value="0">关闭</option>
                        </select>
                    {% else %}
                        <input type="text" readonly id="valve_state" class="layui-input">
                    {% endif %}
                </div>
            </div>

            <div class="layui-form-item" id="valve_dtu_div">
                <label for="recharge_state" class="layui-form-label" style="width: 120px">
                    预充值状态
                </label>
                <div class="layui-input-inline" id="recharge_state_div">
                    {% if 'update_recharge_state' in user.actions %}
                        <select name="recharge_state" id="recharge_state"
                                lay-filter="recharge_state">
                            <option value="">未知</option>
                            <option value="1">开启</option>
                            <option value="0">关闭</option>
                        </select>
                    {% else %}
                        <input type="text" readonly id="recharge_state" class="layui-input">
                    {% endif %}
                </div>
            </div>

            <div class="layui-form-item" id="valve_dtu_div">
                <label for="valve_dtu" class="layui-form-label" style="width: 120px">
                    阀门控制器DTU
                </label>
                <div class="layui-input-inline">
                    {% if 'update_valve_dtu' in user.actions %}
                        <select name="valve_dtu_id" lay-search="" id="valve_dtu" lay-filter="valve_dtu">
                        </select>
                    {% else %}
                        <input type="text" readonly id="valve_dtu" class="layui-input">
                    {% endif %}
                </div>
            </div>

            <div class="layui-form-item" id="address_div">
                <label for="valve_address" class="layui-form-label" style="width: 120px">
                    阀门控制器物理地址
                </label>
                <div class="layui-input-inline">
                    {% if 'update_valve_address' in user.actions %}
                        <input type="number" id="valve_address" name="valve_address"
                               autocomplete="off" class="layui-input">
                    {% else %}
                        <input type="number" id="valve_address" name="valve_address"
                               autocomplete="off" class="layui-input" readonly>
                    {% endif %}
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            let meterState = {
                "id": {{ id }},
                "meter_id": {{ meter_id }},
                "dtu_no": {{ dtu_no }},
                "address": {{ address }},
            };

            //监听提交
            form.on('submit(add)',
                function (res) {
                    //关闭当前frame
                    xadmin.close();

                    return false;
                }
            );

            $("#valve_address").on("change", function () {

                let valve_address = $("#valve_address").val();

                post({
                    "param": JSON.stringify({
                        "address": valve_address, "id": "{{ valve_id }}"
                    }),
                    "action": "update_valve_address"
                }, '/handler/meter/', function (data) {
                    if (!data.success) {

                        layer.msg(data.msg, {icon: 5, time: 3000});
                    }
                });
            });


            form.on('select(valve_state)',
                function (res) {
                    let val = res['value'];
                    if (val.length === 0) {
                        return false;
                    }
                    let nowMeterState = JSON.parse(JSON.stringify(meterState));
                    nowMeterState['valve_state'] = val;
                    post({
                        "param": JSON.stringify(nowMeterState),
                        "action": "update_valve_state"
                    }, '/handler/meter/', function (data) {
                        if (!data.success) {
                            layer.msg(data.msg, {icon: 5, time: 3000});
                        }
                    });
                    return false;
                });

            form.on('select(recharge_state)',
                function (res) {
                    let val = res['value'];
                    if (val.length === 0) {
                        return false;
                    }
                    let nowMeterState = JSON.parse(JSON.stringify(meterState));
                    nowMeterState['recharge_state'] = val;
                    post({
                        "param": JSON.stringify(nowMeterState),
                        "action": "update_recharge_state"
                    }, '/handler/meter/', function (data) {
                        if (!data.success) {
                            layer.msg(data.msg, {icon: 5, time: 3000});
                        }
                    });
                    return false;
                });

            form.on('select(valve_dtu)',
                function (res) {
                    let val = res['value'];
                    post({
                        "param": JSON.stringify({'id': {{ valve_id }}, 'dtu_id': val}),
                        "action": "update_valve_dtu"
                    }, '/handler/meter/', function (data) {
                        if (!data.success) {
                            layer.msg(data.msg, {icon: 5, time: 3000});
                        }
                    });
                    return false;
                }
            );

            get({
                "param": JSON.stringify({"state_id": {{id}}}),
                "action": "query_state"
            }, '/handler/meter/', function (res) {
                if (!res.success) {
                    layer.msg(res.msg, {icon: 5, time: 1000});
                } else {
                    let state_list = ['valve_state',
                        'recharge_state',
                        'battery_pressure_state', 'valve_error_flag', 'owe_state', 'sensor_state', 'online_state', 'valve_address', 'version', 'temperature'];
                    for (let i = 0; i < state_list.length; i++) {
                        $("#" + state_list[i]).val(res.data[state_list[i]]);
                    }
                    let valve_dtu_val = res.data['valve_dtu'];
                    get({
                        "param": JSON.stringify({}),
                        "action": "query_dtu_of_select_box"
                    }, '/handler/dtu/', function (res) {
                        if (!res.success) {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        } else {
                            let valve_dtu = $("#valve_dtu");
                            for (let i = 0; i < res.data.length; i++) {
                                valve_dtu.append('<option value="' + res.data[i].id + '">'
                                    + res.data[i]['dtu_no'] + '(' + res.data[i]['remark'] + ')' + '</option>');
                            }

                            valve_dtu.val(valve_dtu_val);
                            form.render('select');

                        }
                    });
                    form.render('select');
                }
            });


            $("option").css("color", 'black');

        });
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>